<template>
    <div id="approval-detail">
        <el-dialog
            :title="titleCon"
            v-model="isUseDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="60%" 
            :before-close="handleClose"
            :destroy-on-close="true"
            @close="clean"
        >
        
            <template v-if="currentState">
                <el-divider content-position="left">{{ $t('xhBzo4jdmNpIYoZ4hHpzh') }}</el-divider>
                <el-form :model="ruleFormAudit" ref="ruleFormRef" size="default" label-width="120px" :rules="rules">
                    <el-row :gutter="35">
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label="$t('54LFkPkleQrF2h1mJel5m')" prop="N_AuditState">
                                <el-select 
                                    v-model="ruleFormAudit.N_AuditState" 
                                    filterable 
                                    class="m-2" 
                                    :placeholder="$t('tckdwNTjC1zHguUd25kDe')" 
                                    value-key="id"
                                >
                                    <el-option
                                        v-for="item in checkOption"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label="$t('fpnu_9jXplUwtx0vDwhP')">
                                <el-input v-model="ruleFormAudit.V_Remake" :placeholder="$t('0awYkfLqUcPieHhDlz9G')" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </template> 

            <el-form size="default">
                <el-divider content-position="left">{{ detailsType }}</el-divider>
                <template v-if="detailsType === $t('gmUdCBxIoOk73OAuCWdG')">
                    <el-row :gutter="35">
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('7YrNDepF6YGnXofIKj30l')">
                                <el-input readonly v-model="ruleForm.v_ApplyNO" :placeholder="$t('7YrNDepF6YGnXofIKj30l')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('0EDVq0EaoQowa5yp4H0')">
                                <el-input readonly v-model="ruleForm.d_JobTime" :placeholder="$t('0EDVq0EaoQowa5yp4H0')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('xuuQbgKgXbSnhNsF78bC')">
                                <el-input readonly v-model="ruleForm.v_JobAddress" :placeholder="$t('xuuQbgKgXbSnhNsF78bC')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('znlr2HhiXheU4cdB8JdS4')">
                                <el-input readonly v-model="ruleForm.v_ApplyContent" :placeholder="$t('znlr2HhiXheU4cdB8JdS4')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('tPiWuSFanLeOKbJWvfz')">
                                <el-input readonly v-model="ruleForm.v_ApplyEmpName" :placeholder="$t('tPiWuSFanLeOKbJWvfz')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('vrIFk7Cw9mXyRvvvoa4Yx')">
                                <el-input readonly v-model="ruleForm.v_JobTypeName" :placeholder="$t('aZFtRLgKpnRqVbbNixQmz')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('zUr9tUfD4gQ8C9n7_87Xj')">
                                <el-input readonly v-model="ruleForm.v_TeamName" :placeholder="$t('zUr9tUfD4gQ8C9n7_87Xj')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('kJu7Trhi2W73OAVloSf')">
                                <el-input readonly v-model="ruleForm.v_ProjectName" :placeholder="$t('kJu7Trhi2W73OAVloSf')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('4qSllUxIkPaA8Rqf3Jg8y')">
                                <span class="path_look" style="padding-left: 15px;color: #07AAF9" v-if="ruleForm.n_isValid === 1">{{ $t('iPfonvtxVLm7knSyCsLBo') }}</span>
                                <span class="path_look" style="padding-left: 15px;color: #FF5F33" v-else>{{ $t('tzm8JwYsKnqKoNhheJlJx') }}</span>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('s4KbtSrTfOzuWyRcHgTxx')">
                                <template v-if="ruleForm.v_JobFilePath">
                                    <el-link style="padding-left: 15px;" target="_blank" class="path_look" :href="pathData + ruleForm.v_JobFilePath" type="primary">{{ $t('2KyEk7Ir2Lz3bN9ByjSaE') }}</el-link>
                                </template>
                                <template v-else>
                                    <div style="color:#c0c4cc;" class="path_look">
                                        <span>{{ $t('66gSt7xsIbieLa59Td1H') }}</span>
                                    </div>
                                </template>
                            </el-form-item>
                        </el-col> -->
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('xxAj6fsjvIsQrMdlNpolv')">
                                <el-input readonly v-model="ruleForm.createdTime" :placeholder="$t('xxAj6fsjvIsQrMdlNpolv')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('v7AhfaNeGaFoPfZzgpFk')">
                                <el-input readonly v-model="ruleForm.createdUserName" :placeholder="$t('v7AhfaNeGaFoPfZzgpFk')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('hMMqYalIdWhk0McqdxTg')">
                                <span class="path_look" style="padding-left: 15px;" v-if="ruleForm.updatedTime">{{ ruleForm.updatedTime }}</span>
                                <span class="path_look" style="padding-left: 15px;" v-else>-</span>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('2Gu4SnAncIkNclplw6vNj')">
                                <span class="path_look" style="padding-left: 15px;" v-if="ruleForm.updatedUserName">{{ ruleForm.updatedUserName }}</span>
                                <span class="path_look" style="padding-left: 15px;" v-else>-</span>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('9RLaVEiJf1Z1Qv15o6Kll')">
                                <el-input readonly type="textarea" v-model="ruleForm.v_Remake" :placeholder="$t('9RLaVEiJf1Z1Qv15o6Kll')" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-divider content-position="left"> {{ $t('eHdy6iUn3cS1Nqd3eXMnV') }} </el-divider>
                    <el-table class="table-s" :data="fileListArr" style="width: 100%" border>
                        <el-table-column min-width="270" prop="fileOriginName" :show-overflow-tooltip="true" :label="$t('5l2R6NiV8F5KyemPq8xq')"  align="center" />
                        <el-table-column min-width="160" prop="createdTime" :show-overflow-tooltip="true" :label="$t('4pvjWhhdT5Nk2JMc5rQg')"  align="center" />
                        <el-table-column min-width="120" prop="createdUserName" :show-overflow-tooltip="true" :label="$t('8GbxAmDauKsBrgrQQa2')"  align="center" />
                        <el-table-column min-width="120" :show-overflow-tooltip="true" :label="$t('dScKg8pBv4cupCrxspq1r')"  align="center">
                            <template #default="scope">
                                <img style="width: 30px;height: 20px;" :src="pathData + scope.row.path" />
                            </template>
                        </el-table-column>
                        <el-table-column min-width="120" :show-overflow-tooltip="true" :label="$t('liBmO8wb58NMw5HLu9Nf')"  align="center"  fixed="right">
                            <template #default="scope">
                                <el-link target="_blank" :href="pathData + scope.row.path" type="primary">{{ $t('i8A6uFe7Z4rYBFs9LUfm') }}</el-link>
                            </template>
                        </el-table-column>
                    </el-table>

                </template>

                <template v-else>
                    <el-row :gutter="35">
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('yN3XgYqWhrFfTFd4jBtU6')">
                                <el-input readonly v-model="ruleForm.v_CheckNGContent" :placeholder="$t('yN3XgYqWhrFfTFd4jBtU6')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('rIxr0IZu0V5CvKlfEYqBk')">
                                <el-input readonly v-model="ruleForm.d_AskCompliteDate" :placeholder="$t('rIxr0IZu0V5CvKlfEYqBk')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('hgt8rkigvu07O3lOsGgc2')">
                                <el-input type="textarea" readonly v-model="ruleForm.v_ExistsContent" :placeholder="$t('hgt8rkigvu07O3lOsGgc2')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('hEwKge9b2ReUpnJHsHgPs')">
                                <el-input readonly v-model="ruleForm.d_CompliteDate" :placeholder="$t('bvpC6tfPeQx6ouerjX42')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('yZg4b_5Ls7c7fZd9uNw1g')">
                                <el-input type="textarea" readonly v-model="ruleForm.v_CheckChangeContent" :placeholder="$t('yZg4b_5Ls7c7fZd9uNw1g')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('dyWnpvJ8oFsUicF0Oau4f')">
                                <span style="color:#c0c4cc;padding-left: 15px;" class="path_look" v-if="ruleForm.n_CheckChangeState = 1">{{ $t('gsQNjjKc3Gdm5d9qiwHXk') }}</span>
                                <span style="color:#c0c4cc;padding-left: 15px;" class="path_look" v-else-if="ruleForm.n_CheckChangeState = 2">{{ $t('b5krNrA5QBz0shYNj25') }}</span>
                                <span style="color:#c0c4cc;padding-left: 15px;" class="path_look" v-else>{{ $t('uKt4PrCmupaNhgk8hhAo') }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('wmfg6edJuImFjHpeTlbRu')">
                                <el-input readonly v-model="ruleForm.c_CheckResult" :placeholder="$t('wmfg6edJuImFjHpeTlbRu')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('vaVu7Riq0T2n6Dc0Uaz0A')">
                                <el-input type="textarea" readonly v-model="ruleForm.v_CheckResultContent" :placeholder="$t('jdvdRf2a5U7mzqzks5bQq')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('tmruUpoyR5Zja3zkb5oJg')">
                                <el-input readonly v-model="ruleForm.v_NGTypeName" :placeholder="$t('tmruUpoyR5Zja3zkb5oJg')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('z_6MaI6MYIAjEp9UeAfF')">
                                <el-input readonly v-model="ruleForm.v_ChangeEmpName" :placeholder="$t('z_6MaI6MYIAjEp9UeAfF')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('tPiWuSFanLeOKbJWvfz')">
                                <el-input readonly v-model="ruleForm.v_ApplyEmpName" :placeholder="$t('tPiWuSFanLeOKbJWvfz')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('sXyZ6PqmWwEIov0bNsb')">
                                <el-input readonly v-model="ruleForm.v_AuditEmpName" :placeholder="$t('sXyZ6PqmWwEIov0bNsb')" clearable />
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('4qSllUxIkPaA8Rqf3Jg8y')">
                                <el-switch
                                    v-model="ruleForm.n_isValid"
                                    disabled
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    inline-prompt
                                    :active-text="$t('iPfonvtxVLm7knSyCsLBo')"
                                    :inactive-text="$t('tzm8JwYsKnqKoNhheJlJx')"
                                />
                            </el-form-item>
                        </el-col> -->
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('xxAj6fsjvIsQrMdlNpolv')">
                                <el-input readonly v-model="ruleForm.createdTime" :placeholder="$t('xxAj6fsjvIsQrMdlNpolv')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('v7AhfaNeGaFoPfZzgpFk')">
                                <el-input readonly v-model="ruleForm.createdUserName" :placeholder="$t('v7AhfaNeGaFoPfZzgpFk')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('hMMqYalIdWhk0McqdxTg')">
                                <el-input readonly v-model="ruleForm.updatedTime" :placeholder="$t('hMMqYalIdWhk0McqdxTg')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('2Gu4SnAncIkNclplw6vNj')">
                                <el-input readonly v-model="ruleForm.updatedUserName" :placeholder="$t('2Gu4SnAncIkNclplw6vNj')" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                            <el-form-item :label-width="formLabelWidth" :label="$t('9RLaVEiJf1Z1Qv15o6Kll')">
                                <el-input readonly type="textarea" v-model="ruleForm.v_Remake" :placeholder="$t('9RLaVEiJf1Z1Qv15o6Kll')" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-divider content-position="left"> {{ $t('ms1fpd4AXyStopkHw95Z8') }} </el-divider>
                    <el-table class="table-s" :data="fileListArr" style="width: 100%" border>
                        <el-table-column min-width="270" prop="fileOriginName" :show-overflow-tooltip="true" :label="$t('5l2R6NiV8F5KyemPq8xq')"  align="center" />
                        <el-table-column min-width="160" prop="createdTime" :show-overflow-tooltip="true" :label="$t('4pvjWhhdT5Nk2JMc5rQg')"  align="center" />
                        <el-table-column min-width="120" prop="createdUserName" :show-overflow-tooltip="true" :label="$t('8GbxAmDauKsBrgrQQa2')"  align="center" />
                        <el-table-column min-width="120" :show-overflow-tooltip="true" :label="$t('dScKg8pBv4cupCrxspq1r')"  align="center">
                            <template #default="scope">
                                <img style="width: 30px;height: 20px;" :src="pathData + scope.row.path" />
                            </template>
                        </el-table-column>
                        <el-table-column min-width="120" :show-overflow-tooltip="true" :label="$t('liBmO8wb58NMw5HLu9Nf')"  align="center"  fixed="right">
                            <template #default="scope">
                                <el-link target="_blank" :href="pathData + scope.row.path" type="primary">{{ $t('i8A6uFe7Z4rYBFs9LUfm') }}</el-link>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-divider content-position="left"> {{ $t('pAwlJ0p0qBAgZqdtvyyHh') }} </el-divider>
                    <el-table class="table-s" :data="rectifyListArr" style="width: 100%" border>
                        <el-table-column min-width="270" prop="fileOriginName" :show-overflow-tooltip="true" :label="$t('5l2R6NiV8F5KyemPq8xq')"  align="center" />
                        <el-table-column min-width="160" prop="createdTime" :show-overflow-tooltip="true" :label="$t('4pvjWhhdT5Nk2JMc5rQg')"  align="center" />
                        <el-table-column min-width="120" prop="createdUserName" :show-overflow-tooltip="true" :label="$t('8GbxAmDauKsBrgrQQa2')"  align="center" />
                        <el-table-column min-width="120" :show-overflow-tooltip="true" :label="$t('dScKg8pBv4cupCrxspq1r')"  align="center">
                            <template #default="scope">
                                <img style="width: 30px;height: 20px;" :src="pathData + scope.row.path" />
                            </template>
                        </el-table-column>
                        <el-table-column min-width="120" :show-overflow-tooltip="true" :label="$t('liBmO8wb58NMw5HLu9Nf')"  align="center"  fixed="right">
                            <template #default="scope">
                                <el-link target="_blank" :href="pathData + scope.row.path" type="primary">{{ $t('i8A6uFe7Z4rYBFs9LUfm') }}</el-link>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-divider content-position="left">{{ $t('odQpuOypYmCIbyEj44TpZ') }}</el-divider> 
                    <el-table class="heightcss" :data="ruleForm.hazardDetail" style="width: 100%" border>
                        <el-table-column min-width="200" prop="v_WorkType" :show-overflow-tooltip="true" :label="$t('9xM6FvTR_8nWq19wjfgx')"  align="center" />
                        <el-table-column min-width="200" prop="v_WorkExplain" :show-overflow-tooltip="true" :label="$t('f0faXf3TEmiEjagrud8d')"  align="center" />
                        <el-table-column min-width="200" prop="f_Risk_Assessment_L" :show-overflow-tooltip="true" :label="$t('kR6nl8il9ndraLnxdB3Mo')"  align="center" />
                        <el-table-column min-width="200" prop="f_Risk_Assessment_E" :show-overflow-tooltip="true" :label="$t('dF0hvzTTgBxRtEjtHcQ7u')"  align="center" />
                        <el-table-column min-width="200" prop="f_Risk_Assessment_C" :show-overflow-tooltip="true" :label="$t('4H_3Am3S96x5evGuS4uPz')"  align="center" />
                        <el-table-column min-width="200" prop="f_Risk_Assessment_D" :show-overflow-tooltip="true" :label="$t('dEiB4EetFConPmp9cvAhZ')"  align="center" />
                        <el-table-column min-width="200" prop="f_Risk_Assessment_D" :show-overflow-tooltip="true" :label="$t('dEiB4EetFConPmp9cvAhZ')"  align="center" />
                        <el-table-column min-width="200" prop="v_Dangerous_Level" :show-overflow-tooltip="true" :label="$t('gCP5cJhRMe0BnrLqRs')"  align="center" />
                        <el-table-column min-width="200" prop="v_Accient_TypeName" :show-overflow-tooltip="true" :label="$t('ebd7Jl2fPx6WeiyWryLYl')"  align="center" />
                        <el-table-column min-width="200" prop="v_Shielding" :show-overflow-tooltip="true" :label="$t('fw78QmJeZpmsty3o1TeU')"  align="center" />
                        <el-table-column min-width="200" prop="v_Advice_Shielding" :show-overflow-tooltip="true" :label="$t('l4v70UyItNhFizQ4AInL6')"  align="center" />
                        <el-table-column min-width="200" prop="v_Control_Level" :show-overflow-tooltip="true" :label="$t('7Lw5y52b0yczYwCbDguvq')"  align="center" />
                        <el-table-column min-width="200" prop="v_Control_Measures" :show-overflow-tooltip="true" :label="$t('xCeeB3WeM4ZkHhTh5btqG')"  align="center" />
                        <el-table-column min-width="200" prop="v_OrgName" :show-overflow-tooltip="true" :label="$t('cw6bUPoDlHdwNcW40my')"  align="center" />
                        <el-table-column min-width="200" prop="v_EmpName" :show-overflow-tooltip="true" :label="$t('y7I9J0Du746oyZTnse2kM')"  align="center" />
                        <el-table-column min-width="200" prop="v_PushTypeName" :show-overflow-tooltip="true" :label="$t('dHxlDhT9RRckG6mYRjgeQ')"  align="center" />
                        <el-table-column min-width="200" :show-overflow-tooltip="true" :label="$t('s4KbtSrTfOzuWyRcHgTxx')"  align="center">
                            <template #default="scope">
                                <template v-if="scope.row.v_JobFilePath">
                                    <el-link target="_blank" :href="pathData + scope.row.filePaths" type="primary">{{ $t('2KyEk7Ir2Lz3bN9ByjSaE') }}</el-link>
                                </template>
                                <template v-else>
                                    <div style="color:#c0c4cc;">
                                        <span>{{ $t('66gSt7xsIbieLa59Td1H') }}</span>
                                    </div>
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column min-width="200" prop="v_Remake" :show-overflow-tooltip="true" :label="$t('9RLaVEiJf1Z1Qv15o6Kll')"  align="center" />
                        <el-table-column min-width="200" prop="createdTime" :show-overflow-tooltip="true" :label="$t('xxAj6fsjvIsQrMdlNpolv')"  align="center" />
                        <el-table-column min-width="200" prop="createdUserName" :show-overflow-tooltip="true" :label="$t('v7AhfaNeGaFoPfZzgpFk')"  align="center" />
                        <el-table-column min-width="200" prop="updatedTime" :show-overflow-tooltip="true" :label="$t('hMMqYalIdWhk0McqdxTg')"  align="center" />
                        <el-table-column min-width="200" prop="updatedUserName" :show-overflow-tooltip="true" :label="$t('2Gu4SnAncIkNclplw6vNj')"  align="center" />
                    </el-table>
                </template>
            </el-form>
            
            <template #footer>
                <el-button @click="cancelUseClick">{{ $t('9YxdWp3OFxHvMW4VGh71') }}</el-button>
                <el-button v-if="currentState" type="primary" :readonly="repeatDis" @click="submitFormClick(ruleFormRef)">{{ $t('0uLetDeVnieCu_83QvxWp') }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, reactive , computed , toRef , toRefs , toRaw , onMounted , watch } from 'vue'
import { FormInstance, FormRules , ElMessage, ElButton, ElCol, ElDatePicker, ElDialog, ElDivider, ElForm, ElFormItem, ElInput, ElOption, ElRadio, ElRow, ElSelect, ElTable, ElTableColumn } from 'element-plus'
import { JobApplyChangeAuditState } from '/@/api/sms/sms'
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';

/*** 定义接口基础数据类型 */
interface formType {
    ruleForm: any,
    ruleFormAudit: any,
    repeatDis: Boolean,
}
/*** form 表单数据类型 */
type ruleFormType = {}
export default defineComponent( {
    name: 'approval-detail',
    components: {},
    props: {
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: String,
            default: ''
        },
        currentState: {
            type: Boolean,
            default: false
        },
    },
    setup(props,ctx){
        const { proxy } = useCurrentInstance();
        const $t = proxy.$t;
        
        const titleCon = ref()
        const detailsType = ref('')
        const pathData = ref(import.meta.env.VITE_API_URL + '/') // 获取地址
        const fileListArr:any = ref([])
        const rectifyListArr: any = ref([])
        const ruleFormRef:Ref = ref(null)

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            repeatDis: false,
            ruleForm: {} as ruleFormType,
            ruleFormAudit: {
                N_AuditState: '',
                V_Remake: '',
            },
        })

        /*** 基础验证 rules */
        const rules = reactive < FormRules > ({
            /*** 放置验证 */
            N_AuditState: [
				{ required: true, message: $t('ttOUtgkIKimR6jMtRkM'), trigger: 'change' },
			],
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            ctx.emit('cancelUseClick')
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('cancelUseClick')
        }
        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                state.repeatDis = false
                titleCon.value = $t('dqIm8ahxKjSzxhEGtZqjj')
                rectifyListArr.value = []
                fileListArr.value = []
                let getData = JSON.parse(props.repairInfo)
                console.log(getData,'getData')
                console.log(props.currentState,'currentState')
                if(JSON.parse(props.repairInfo).n_Type === 1){
                    detailsType.value = $t('gmUdCBxIoOk73OAuCWdG')
                    if (getData.jobApply.n_isValid === 1) { getData.jobApply.n_isValid = true }
                    if (getData.jobApply.n_isValid === 2) { getData.jobApply.n_isValid = false }
                    if(getData.jobApply.v_JobFilePath && getData.jobApply.v_JobFilePath.length !== 0){
                        fileListArr.value = getData.jobApply.v_JobFilePath
                    }else{
                        fileListArr.value = [] 
                    }
                    state.ruleForm = getData.jobApply
                }else{
                    detailsType.value = $t('tEpXunwBhIiyxO8x9Ah4')
                    if(getData.securityCheckChange.n_isValid === 1){ getData.securityCheckChange.n_isValid = true }
                    if(getData.securityCheckChange.n_isValid === 2) { getData.securityCheckChange.n_isValid = false }

                    if(getData.securityCheckChange.v_CheckNgImagePath && getData.securityCheckChange.v_CheckNgImagePath.length !== 0){
                        fileListArr.value = getData.securityCheckChange.v_CheckNgImagePath
                    }else{
                        fileListArr.value = [] 
                    }

                    if(getData.securityCheckChange.v_CheckChangeImagePath && getData.securityCheckChange.v_CheckChangeImagePath.length !== 0){
                        rectifyListArr.value = getData.securityCheckChange.v_CheckChangeImagePath
                    }else{
                        rectifyListArr.value = [] 
                    }

                    if(getData.securityCheckChange.hazardDetail && getData.securityCheckChange.hazardDetail.length !== 0){
                        getData.securityCheckChange.hazardDetail.map((i:any) => {
                            if(i.n_PushType <= 1){
                                i.v_PushTypeName = $t('7dvrp8KNteJ2KsyX53N')
                            }else if(i.n_PushType === 2){
                                i.v_PushTypeName = $t('0GdEpZhBB3RGlirtCm1U')
                            }else if(i.n_PushType === 3){
                                i.v_PushTypeName = $t('w3sd0wQwiYthGeopJcU4t')
                            }else if(i.n_PushType === 4){
                                i.v_PushTypeName = $t('eec8W28NIj_1hBweAkWs')
                            }else{
                                i.v_PushTypeName = $t('tuRoDlk7koL463Gf9SbzY')
                            }
                        })
                    }else{
                        getData.securityCheckChange.hazardDetail = []
                    }
                    state.ruleForm = getData.securityCheckChange
                }
            }
        })

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog
        })

        const submitFormClick = (formEl: FormInstance | undefined) => {
            if(!formEl) return
            formEl.validate( async (valid) => { 
                if(valid){
                    // state.repeatDis = true
                    // let param = { n_Id : JSON.parse(props.repairInfo).n_Id }
                    let param = toRaw(state.ruleFormAudit)
                    param.n_Id = JSON.parse(props.repairInfo).n_Id
                    JobApplyChangeAuditState(param)
                    .then((res:any) => {
                        if(res.success){
                            ctx.emit('updateData')
                            ctx.emit('controlUseClick')
                        }
                    })
                    .catch((error:any) => {
                        // state.repeatDis = false
                    })
                }else{
                    console.log('error submit!')
					return false
                }
            })
        }

        /*** clean 清空数据 */
        const clean = () => {
            if(ruleFormRef.value) ruleFormRef.value.resetFields();
        }

        return {
            handleClose,
            cancelUseClick,
            titleCon,
            ...toRefs(state),
            isUseDialog,
            detailsType,
            pathData,
            formLabelWidth: '130px',
            submitFormClick,
            fileListArr,
            rectifyListArr,
            rules,
            ruleFormRef,
            clean,
            checkOption: [
                {label: $t('bYzVwQWm8KwFuWyNMqk4X'), value: 1},
                {label: $t('w4VhwoPcGmZvsLAw9Ejgt'), value: -1},
            ]
        }
    },
} )
</script>
<style scoped lang="scss">
    :deep(.el-link__inner){
        color: #0052D9;
    }
    :deep(.el-select){
        width: 100%;
    }
    // :deep(.el-divider__text){
    //     color: #303133;
    //     font-weight: bold;
    // }
    .path_look{
        display: block;
        width: 100%;
        border: 1px solid #e4e7ed;
        border-radius: 4px;
        span{
          display: block;
          margin-left: 15px;  
          color: #606266;
        }
    }
    .second-level-detail{
        width: 100%;
        margin: auto;
        padding: 10px;
        border: 1px solid #fcfafa;
        border-radius: 2px;
    }
    .data-detail{
        width: 100%;
        // border: 1px solid #ececec;
        border-radius: 2px;
        padding: 10px;
    }
</style>